import React, { useEffect } from 'react';
import './fruiter.css';
import GotoPage from './GotoPage';
import { withRouter } from "react-router-dom";
import { adminCheck, ReportCreator, FeedbackCreator, ExamineCreator, GoodsCreator, DelGoods, getAdmin } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import './manage.css';
import SIdmenu from './SIdmenu';
import { Badge } from 'antd-mobile';
import $ from 'jquery'
//商品管理页面（商家已发布商品页） 点击果农管理页表格一行会跳转到商家已发布商品页
const Goods = (props) => {
    useEffect(() => {
        props.dispatch(GoodsCreator())
        props.dispatch(adminCheck())
        props.dispatch(ExamineCreator())
        props.dispatch(ReportCreator())
        props.dispatch(FeedbackCreator())
    }, []);

    $(function () {
        var len = $('table tr').length;
        for (var i = 1; i < len; i++) {
            $('table tr:eq(' + i + ') td:first').text(i);
        }

    });

    return (
        <div className="box" >
            <SIdmenu />
            <div className="box_body">
                <div className='body_left'>
                    <span id='menu'><i className='iconfont icon-zhongbiao'></i>系统菜单</span>
                    <ul>
                        <li onClick={() => props.history.push('/systemmanage')}>系统管理</li>
                            <li onClick={() => props.history.push('/fruitermanage')}>果农管理</li>
                            <li onClick={() => props.history.push('/usermanage')}>用户管理</li>
                            <li onClick={() => props.history.push('/communitymanage')}>动态管理</li>

                            <li onClick={() => props.history.push('/feedbackmanage')}><Badge text={props.feedbackreducer.length}>反馈管理</Badge></li>
                            {/* <li onClick={() => this.props.history.push('/fruitermanage')}>果农管理</li> */}
                            <li onClick={() => props.history.push('/discussmanage')}><Badge text={props.reportreducer.length}>举报管理</Badge></li>
                            <li onClick={() => props.history.push('/commoditymanage')}><Badge text={props.examinereducer.length}>商品审核</Badge></li>
                    </ul>
                </div>
                {/* 右半部分 */}
                <div className="body_right">
                    <div className='right_top'>
                        <p>商家已发布商品 <span onClick={() => props.history.push('/fruitermanage')}>×</span></p>
                    </div>
                    <div className='right_middle'>
                        <div className='search'>
                            <div className='goodstable'>
                                <table border='0' cellpadding='5' cellspacing='0' className='mytable'>
                                    <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>商品ID</th>
                                            <th>所属商家ID</th>
                                            <th>商品名称</th>
                                            <th>商品描述</th>
                                            <th>商品价格</th>
                                            <th>发布时间</th>
                                            <th>收藏人数</th>
                                            <th>预约人数</th>
                                            <th>图片</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {
                                            props.goodsreducer.map((item, index) => {
                                                if (item.business_id == props.location.state.business_id) {
                                                    return (
                                                        <tr>
                                                            <td></td>
                                                            <td>{item.commodity_id}</td>
                                                            <td>{item.business_id}</td>
                                                            <td>{item.commodity_title}</td>
                                                            <td>{item.commodity_describe}</td>
                                                            <td>{item.commodity_money}</td>
                                                            <td>{item.commodity_shelf_time}</td>
                                                            <td>{item.commodity_collect}</td>
                                                            <td>{item.commodity_appoint}</td>
                                                            <td id='commodity_pic'><img key={index} src={`http://www.h5weixin.club:1025/api/image/${item.commodity_pic}`} /></td>
                                                            <td>
                                                                <button className="delete"
                                                                onClick={() => {
                                                                    const adminpwd = prompt('请输入管理员登录密码：')
                                                                    if (adminpwd) {
                                                                        props.dispatch(DelGoods(getAdmin(props).admin_id, adminpwd, item.commodity_id))
                                                                    }
                                                                    return false;
                                                                }}>删除</button></td>
                                                        </tr>
                                                    )
                                                }
                                            })
                                        }
                                    </tbody>
                                </table>
                            </div>
                            {/* 分页 */}
                            <GotoPage />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const mapStateToProps = (state) => ({
    adminlist: state.adminreducer.adminlist,
    goodsreducer: state.goodsreducer,
    reportreducer: state.reportreducer,
    examinereducer: state.examinereducer,
    feedbackreducer: state.feedbackreducer
})
export default connect(mapStateToProps)(withRouter(Goods));